<template>
	<view class="review-box page-box">
		<u-navbar bgColor="transparent" height="74">
			<view class="u-nav-slot" slot="left" @click="goBack">
				<image style="height: 90rpx;width: 99rpx; " src="@/static/images/review/back.png" />
			</view>
			<view class="u-nav-slot-center" slot="center">
				<span>智能复习</span>
				<image style="height: 42rpx;width: 42rpx;margin:10rpx 0 0 10rpx;" src="@/static/images/review/help.png" />
			</view>
			<view class="u-nav-slot-right" slot="right">
				<image style="height: 32rpx;width: 32rpx;margin:0rpx 10rpx 0 0rpx;"
					src="@/static/images/review/naozhong.png" />
				<span>复习设置</span>
			</view>
		</u-navbar>
		<view class="review-content">
			<view class="review-content-left ">
				<view class="review-content-left-item" v-for="item in tabs" :key="item.value"
					:class="currentTab== item.value ?'active':''" @click="tabChange(item.value)">
					{{item.name}}
				</view>
			</view>
			<view class="review-content-right">
				<view v-if="currentTab === 0" class="content-box">
					<tableCustom :showHandle="true" :thList="thList"></tableCustom>
				</view>
				<block v-if="currentTab === 1">
					<vocabularyVue></vocabularyVue>
				</block>
				<block v-if="currentTab === 2">
					<vocabularyVue></vocabularyVue>
				</block>

				<block v-if="currentTab === 3">
					<vocabularyVue></vocabularyVue>
				</block>
				<!-- 语法 -->
				<view v-if="currentTab === 4" class="content-box">
					<view class="header">
						<view class="">
							共有<span>0</span>个生词，前<span>0</span>个需要立即复习。
						</view>
						<view class="btn">
							<span>智能复习</span>
							<image src="@/static/images/review/you.png" />
						</view>
					</view>
					<tableCustom :showHandle="false" :thList="grammarList"></tableCustom>
				</view>
				<!-- 习题 -->
				<view v-if="currentTab === 5" class="content-box">
					<view class="header">
						<view class="">
							共有<span>0</span>个生词，前<span>0</span>个需要立即复习。
						</view>
						<view class="btn">
							<span>智能复习</span>
							<image src="@/static/images/review/you.png" />
						</view>
					</view>
					<view style="height: 100%;">
						<exercisesVue></exercisesVue>	
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tableCustom from './components/table/table.vue';
	import vocabularyVue from './components/vocabulary/vocabulary.vue';
	import exercisesVue from './components/exercises/exercises.vue';
	export default {
		components: {
			tableCustom,
			vocabularyVue,
			exercisesVue
		},
		data() {
			return {
				currentTab: 0,
				tabs: [{
						value: 0,
						name: '汇总'
					}, {
						value: 1,
						name: '词汇'
					}, {
						value: 2,
						name: '词组'
					}, {
						value: 3,
						name: '句子'
					}, {
						value: 4,
						name: '语法'
					}, {
						value: 5,
						name: '习题'
					}

				],
				thList: [{
						name: '专项',
						align: 'center',

					},
					{
						name: '今日已复习',
						align: 'center',

					},
					{
						name: '剩余需复习量',
						align: 'center',

					},
					{
						name: '操作',
						align: 'center',
					}
				],
				grammarList: [{
						name: '课程',
						align: 'center',

					},
					{
						name: '知识点',
						align: 'center',

					},
				]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				console.log(val);
				this.currentTab = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: radial-gradient(49.06% 50% at 50% 50%, #CCCCCC 0%, #0189FF 100%);
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #DBD9D9;
		font-size: px_2_vw(48);

	}

	.u-nav-slot-right {
		width: px_2_vw(175);
		height: px_2_vw(45);
		font-size: px_2_vw(20);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		border: 4rpx solid #6CBBFE;
		border-radius: 59px;
	}

	.review-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 27rpx;
		margin-top: 165rpx;

		.active {
			background: #fff;
			color: #0892FF !important;
		}

		.review-content-left {
			width: px_2_vw(119);
			height: px_2_vw(700);
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.review-content-left-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: px_2_vw(119);
				height: px_2_vw(79);
				text-align: center;
				color: #fff;
				font-size: px_2_vw(36);
				font-weight: 400;
				border-radius: 25rpx 0 0 25rpx;
				border: 5rpx solid #FFFFFF;
				border-right: 0;
				// margin-bottom: 50rpx;
			}
		}

		.review-content-right {
			width: px_2_vw(1693);
			height: px_2_vw(850);
			border-radius: 67rpx 67rpx 0 0;
			background: #fff;

			// margin-left: -1rpx;

		}
	}

	.content-box {
		padding: 80rpx 30rpx;
		height: 100%;
		 
	}

	.header {
		font-size: px_2_vw(20);
		color: #5C5C5C;
		display: flex;
		align-items: center;
		// padding-left: 190rpx;
		// padding-top: 71rpx;
		padding-bottom: 20rpx;

		span {
			color: #D43030;
		}

		.btn {
			width: px_2_vw(121);
			height: px_2_vw(36);
			border: 2rpx solid #FF5F0F;
			color: #FF5F0F;
			font-size: px_2_vw(20);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 63rpx;
			background: rgba(250, 239, 140, 0.67);
		}

		image {
			width: px_2_vw(15);
			height: px_2_vw(15);
			margin-left: 8rpx;
		}
	}
</style>